<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入elementui样式类-->
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/js/index.css">
    <link rel="stylesheet" href="/js/scrollbar.css">
    <script src="/js/jquery-3.2.1.js"></script>
</head>
<body>
    <div id="app">
        <el-table
                :data="tableData"
                :row-key="(row)=>{ return row.id}"
                tooltip-effect="dark"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="资产内部编号"
                    v-if="false">
            </el-table-column>
            <el-table-column
                    prop="asId"
                    label="资产编号"
                    >
            </el-table-column>
            <el-table-column
                    prop="isBack"
                    label="业务类型"
                    >
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.isBack == '1' ? '' : 'warning'"
                            disable-transitions>{{scope.row.isBack == '1' ? '申请' : '归还'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="applyer"
                    label="申请者"
                    >
            </el-table-column>
            <el-table-column
                    prop="yesNo"
                    label="是否同意"
                   >
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.yesNo | statusFilter"
                            disable-transitions>{{scope.row.yesNo | formatStata}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="审批者"
                    >
            </el-table-column>
        </el-table>
    </div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/index.js"></script>
<script src="/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [],//当前申请列表
            }
        },
        filters: {
            // el-tag类型转换
            statusFilter(status) {
                const statusMap = {
                    1: 'info',
                    2: 'success',
                    3: 'danger'
                }
                return statusMap[status]
            },
            // 状态显示转换
            formatStata(status) {
                const statusMap = {
                    1: '初始',
                    2: '同意',
                    3: '不同意'
                }
                return statusMap[status]
            },
        },
        methods: {
            //获取当前用户的所有申请列表
            findAllApplyInfo() {
                //定义要传递的参数
                let params = new URLSearchParams();
                //获取所有的申请列表
                axios.post("apply/personList", params).then((res) => {
                    if (res.data == null){
                        this.$message.error('用户信息过期！请重新登陆');
                        setTimeout("top.location.href = 'logout'",1000)
                    }
                    //设置当前页的员工列表
                    this.tableData = res.data;
                    //输出到控制台
                    console.log(this.tableData)
                })
            },
        },
        created: function () {
            this.findAllApplyInfo();
        }
    })
    </script>
